<template>
	<view class="content">
		<a-demo title="基础使用">
			<view class="images" desc="默认大小">
				<pure-image :src="src"></pure-image>
			</view>
		</a-demo>

		<a-demo title="设置大小">
			<view class="images">
				<pure-image :src="src" width="200px" height="150px"></pure-image>
				<pure-image :src="src" width="100px" height="80px"></pure-image>
			</view>
		</a-demo>

		<a-demo title="圆形图片">
			<view class="images">
				<pure-image :src="src" circle width="140px"></pure-image>
			</view>
		</a-demo>

		<a-demo title="加载中状态" desc="请降低网速或刷新查看效果">
			<view class="images">
				<pure-image :src="src"></pure-image>
				<pure-image :src="src" loadingText="正在加载..."></pure-image>
				<pure-image :src="src" loadingIcon="__loading" loadingSpin></pure-image>
				<pure-image :src="src" loadingIcon="__loading" loadingSpin loadingText="正在加载..."></pure-image>
			</view>
		</a-demo>

		<a-demo title="加载失败状态">
			<view class="images">
				<pure-image :src="`xxx_${src}_xxxxxxxxxx`"></pure-image>
				<pure-image :src="`xxx_${src}_xxxxxxxxxx`" failText="图片加载失败"></pure-image>
			</view>
		</a-demo>

		<a-demo title="占位图" desc="一般用于图片较大，在图片加载前显示一个小图片进行占位时">
			<view class="images">
				<pure-image :placeholder="placeholder" :src="waitSrc"></pure-image>
			</view>
		</a-demo>

		<a-demo title="点击预览">
			<view class="images">
				<pure-image :placeholder="placeholder" :src="src" preview></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - scaleToFill">
			<view class="images">
				<pure-image :src="src" mode="scaleToFill"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - aspectFit">
			<view class="images">
				<pure-image :src="src" mode="aspectFit"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - aspectFill" desc="默认模式">
			<view class="images">
				<pure-image :src="src" mode="aspectFill"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - widthFix">
			<view class="images">
				<pure-image :src="src" mode="widthFix"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - heightFix">
			<view class="images">
				<pure-image :src="src" mode="heightFix"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - top">
			<view class="images">
				<pure-image :src="src" mode="top"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - bottom">
			<view class="images">
				<pure-image :src="src" mode="bottom"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - center">
			<view class="images">
				<pure-image :src="src" mode="center"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - left">
			<view class="images">
				<pure-image :src="src" mode="left"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - right">
			<view class="images">
				<pure-image :src="src" mode="right"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - top left">
			<view class="images">
				<pure-image :src="src" mode="top left"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - top right">
			<view class="images">
				<pure-image :src="src" mode="top right"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - bottom left">
			<view class="images">
				<pure-image :src="src" mode="bottom left"></pure-image>
			</view>
		</a-demo>

		<a-demo title="裁剪模式 - bottom right">
			<view class="images">
				<pure-image :src="src" mode="bottom right"></pure-image>
			</view>
		</a-demo>


	</view>
</template>

<script setup>
import { ref } from "vue";
import { onReady } from "@dcloudio/uni-app";

const src = ref("http://gips0.baidu.com/it/u=1370402140,2009956566&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280");
const placeholder = ref("http://gips0.baidu.com/it/u=3560029307,576412274&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280");
const waitSrc = ref("");


// 模拟占位图显示状态
onReady(() => {
	setTimeout(() => {
		waitSrc.value = src.value;
	}, 3000);
});

</script>

<style scoped>
.images {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 10px;
	align-items: flex-end;
}

.images-item {
	display: flex;
	flex-direction: column;
	gap: 15px;
}



.images-item-text {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
</style>
